<template>
    <div>
        <Carousel v-model="indexItem" dots="inside" autoplay-speed="4000" autoplay trigger="hover">
            <CarouselItem>
                <img src="../../assets/index/11.jpg" width="100%" alt="">
            </CarouselItem>
            <CarouselItem>
                <img src="../../assets/index/22.jpg" width="100%" alt="">
            </CarouselItem>
            <CarouselItem>
                <img src="../../assets/index/33.jpg" width="100%" alt="">
            </CarouselItem>
        </Carousel>
        <div class="sy1"></div>
        <Row>
            <Col offset="4" span="16" align="center">
                <div>
                    <h4 style="height: 60px;overflow: hidden;text-align: center;font-size: 18px;">
                        <a href="/" style="color: #3d944c">
                            坤鸿工程解决方案</a>
                        <div style="color: #b2b2b2;font-weight: normal;">ENGINEERING SOLUTIONS
                        </div>
                    </h4>
                    <img src="../../assets/index/poxtit.png" width="100%" alt="">
                </div>

                <Carousel v-model="indexItem2" trigger="hover">
                    <CarouselItem>
                        <img src="../../assets/index/2-1.jpg" width="100%" height="420" alt="">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="../../assets/index/2-2.jpg" width="100%" height="420" alt="">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="../../assets/index/2-3.jpg" width="100%" height="420" alt="">
                    </CarouselItem>
                </Carousel>
            </Col>
        </Row>
        <Row style="background-color: #f9f5f2">
            <Col offset="4" span="16" align="center">
                <div>
                    <h4 style="height: 60px;overflow: hidden;text-align: center;font-size: 18px;">
                        <a href="/" style="color: #3d944c">
                            经典客户案例</a>
                        <div style="color: #b2b2b2;font-weight: normal;">SUCCESSFUL CASE
                        </div>
                    </h4>
                    <img src="../../assets/index/poxtit.png" width="100%" alt="">
                </div>
                <Row :gutter="16">
                    <Col span="8">
                        <img src="../../assets/index/case/11.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/22.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/33.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/44.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/55.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/66.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/77.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/88.jpg" width="100%" height="226" alt="2">
                    </Col>
                    <Col span="8">
                        <img src="../../assets/index/case/99.jpg" width="100%" height="226" alt="2">
                    </Col>
                </Row>

            </Col>
        </Row>
        <div class="dz">
            <Col offset="4" span="10" align="left">
                <div>
                    <h6 style="color: #3d944c;font-size: 26px;margin-bottom: 10px;line-height: 40px;">湖南坤鸿信息工程有限公司</h6>
                    <span style="font-size: 20px;line-height: 30px;color:#fff"><b>500家</b>客户首选的弱电工程专家，<b>10年专注</b>于弱电行业技术！</span>
                </div>
            </Col>
            <Col span="6" align="right">
                <a style="width: 180px;height: 50px;line-height: 50px;float: right;text-align: center;font-size: 16px;color: #FFF;background: #3d944c;"
                   href="tencent://message/?uin=657364061&amp;Site=&amp;Menu=yes" target="_blank">马上详细了解</a>
            </Col>
        </div>
        <div style="width: 100%;height: 180px;padding: 40px;background-color: #fcfcfc">
            <Col offset="4" span="16" align="left">
                <div>
                    <h2 class="h22">
                        专业团队 专业施工维护
                        <span class="h22s">让您享受贴心、舒心、放心的弱电工程服务</span>
                    </h2>
                </div>
            </Col>
        </div>
        <Row class="about">
            <Col offset="4" span="16">
                <div class="about_t">
                    <div class="more"><a href="#" target="_blank">+ 了解详情</a></div>
                    <h3>ABOUT US</h3>
                    <h2 style="background-color: #3d944c;    display: inline-block;padding:0 10px;color: #fff">关于我们</h2>
                </div>
            </Col>
            <Col offset="4" span="16">
                <div style="float: left">
                    <img src="../../assets/index/about.jpg">
                </div>
                <div style="float: left;width: 60%;margin-left: 30px;">
                    <h3 style="font-size: 20px">湖南坤鸿信息工程有限公司</h3>
                    <span style="font-size: 15px;line-height: 30px;">
                        湖南坤鸿信息工程有限公司主要从事：安防网络监控系统、多媒体会议系统、综合布线、LED屏信息发布、拼接屏信息发布
                        、机房工程设计及施工、门禁系统、电话系统等。为您的企业定制专属的网络安全信息服务。
                    </span>
                    <div style="margin-top: 30px">
                        <a style="padding: 10px 20px;background-color: #3d944c" href="#"
                           target="_blank">了解详情+</a>
                    </div>

                </div>
            </Col>
        </Row>
        <div class="dz">
            <Col offset="4" span="10" align="left">
                <div>
                    <h6 style="color: #3d944c;font-size: 26px;margin-bottom: 10px;line-height: 40px;">
                        最优质量 最佳服务 合理价格
                    </h6>
                    <span style="font-size: 20px;line-height: 30px;color:#fff">
                                            <b>坤鸿信息 六大核心优势</b> &nbsp;&nbsp;为您提供一体化、全方位的信息工程服务！
                                        </span>
                </div>
            </Col>
            <Col span="6" align="right">
                <a style="width: 180px;height: 50px;line-height: 50px;float: right;text-align: center;font-size: 16px;color: #FFF;background: #3d944c;"
                   href="tencent://message/?uin=657364061&amp;Site=&amp;Menu=yes" target="_blank">马上详细了解</a>
            </Col>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Index',
        data() {
            return {
                indexItem: 0,
                indexItem2: 0
            }
        }
    }
</script>

<style scoped>
    .dz {
        background: url(../../assets/index/boxbg1.jpg) center;
        width: 100%;
        height: 180px;
        padding: 40px
    }

    .h22 {
        background: url(../../assets/index/bt03.jpg) no-repeat 80% 0;
        font: bold 22px "微软雅黑";
        color: #222;
        height: 90px;
        text-align: right;
        overflow: hidden;
        padding: 10px 296px 0 0;
    }

    .h22s {
        display: block;
        font: bold 28px/30px 微软雅黑;
        color: #f6a00a;
        text-align: left;
        padding-left: 25%;
    }

    .about {
        padding-top: 20px;
        background-color: #f9f5f2
    }

    .about.us {

    }

    .about_t {
        width: 100%;
        height: 55px;
        position: relative;
        background: url(../../assets/index/about_titbg.gif) repeat-x bottom left;
    }

    .about_t .more {
        position: absolute;
        bottom: 0;
        right: 30px;
        padding: 0 15px;
        background: #3d944c;
        color: #FFF;
    }
    a{
        color: #fff;
        text-decoration: none;
    }
    a:hover{
        color: #fff;
        text-decoration: none;
    }

    .sy1 {
        height: 475px;
        background: url("../../assets/index/sy1.png") no-repeat ;
        background-size: 100%;
    }
</style>